[CSS] Avatar mit Instagram Border Gradient - Online Status Edition

Zitat von Vulperix

Hallöchen liebe Mitglieder der WBBSupport Community.

Ich hab mir mal den CSS Code von @Belarus geschnappt und daraus den Online Status gemacht.

Preview:


Benutzung:
CSS Quellcode unter Anpassung  DEIN_STYLE  Erweiterte Einstellungen  Eigene Deklarationen - oder - Stilunabhängiges CSS und SCSS einfügen.

CSS

@include screen-md-up {
.messageSidebar .userAvatarImage {
    background-color: #2d3441; // Könnt ihr gerne am Stil anpassen
    position: sticky;
    z-index: 1;
    margin: 5px;
    width: 90px;
    height: 90px;
}
.messageSidebar .badgeOnline {
    bottom: 0;
    background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
    border-radius: 1000px;
    padding: 4px;
    animation: animate 1.5s linear infinite;
    font-size: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

@keyframes animate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
}

Alles anzeigen

Hinweis

Dieser Quellcode funktioniert nur bei Styles mit einen runden Avatar. Sollte ein eckiger oder anders geformter Avatar im Style genutzt werden, so müssen die CSS-Deklarationen natürlich entsprechend angepasst werden!

Originaler Code: > Klick mich fest :P <

Alles anzeigen

Da ich noch Anfänger bin was CSS angeht was muss ich denn für eckige Avatare ändern?

Danke für deine Hilfe

Ah ok Danke für deine Hilfe!